<template>
  <div class="register-form-page">
    <div class="logo-container">
        <div class="logo-box">
          <router-link to="/">
            <img src="/logo.png" alt="LOGO" class="logo">
          </router-link>
        </div>
        <div class="tip" v-if="!isTipClosed">
           <span class="tip-txt">メールアドレス確認が完了しました。あと少しで会員登録が完了します。</span>
           <button class="tip-close" @click="closeTip">×</button>
        </div>
       
        <!-- <router-link to="/">
          <img src="/logo.png" alt="LOGO" class="logo">
        </router-link> -->
      </div>
    <div class="register-left">
      <div class="register-box">        
        <el-form ref="registerFormRef" :model="formData" :rules="registerRules">          
          <el-form-item prop="verificationCode" label="検証コード" required>
            <el-input v-model="formData.verificationCode" class="verification-input" style="width: 200px;height: 32px;">
            </el-input>
          </el-form-item>
          
          <el-form-item prop="username" label="ユーザー名" style="width: 780px;" required>
            <el-input v-model="formData.username" class="username-input" style="width: 200px;height: 32px;">
            </el-input>
            
            <div class="form-desc">※ユーザー名は登録時に変更できません。表示名はプロフィール編集画面でいつでも設定できます。</div>
            <div class="form-tip">※半角英数字4～16文字</div>
          </el-form-item>
          
          <el-form-item prop="email" label="メールアドレス" required>
            <div class="input-with-tip">
              <el-input v-model="formData.email" type="email" class="password-input" style="width: 200px;height: 32px;">
              </el-input>
            </div>
          </el-form-item>

          <el-form-item prop="password" label="パスワード" required>
            <div class="input-with-tip">
              <el-input v-model="formData.password" type="password" show-password class="password-input" style="width: 200px;height: 32px;">
              </el-input>
              <div class="form-tip">※半角英数字8～12文字、記号利用可能</div>
            </div>
          </el-form-item>
          
          <el-form-item prop="repassword" label="パスワードを再入力してください" required>
            <el-input v-model="formData.repassword" type="password" show-password class="password-confirm-input" style="width: 200px;height: 32px;">
            </el-input>
          </el-form-item>
          
          <el-form-item prop="type" label="個人/法人">
            <el-radio-group v-model="formData.type" class="user-type-radio">
              <el-radio :label="1">個人</el-radio>
              <el-radio :label="2">法人</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <div class="name-group">
            <el-form-item prop="surname" class="half-width" label="氏名（姓）" required>
              <el-input v-model="formData.surname" class="name-input" style="width: 200px;height: 32px;"></el-input>
            </el-form-item>
            <el-form-item prop="name" class="half-width" label="（名）" style="margin-right: 410px;margin-left: -60px;">
              <el-input v-model="formData.name" class="name-input" style="width: 200px;height: 32px;"></el-input>
            </el-form-item>
          </div>
          
          <div class="name-group">
            <el-form-item prop="surname2" class="half-width" label="氏名（かな） (せい)" style="margin-right: -320px;" required>
              <el-input v-model="formData.surname2" class="name-input" style="width: 200px;height: 32px;"></el-input>
            </el-form-item>
            <el-form-item prop="name2" class="half-width" label="(めい)">
              <el-input v-model="formData.name2" class="name-input" style="width: 200px;height: 32px;"></el-input>
            </el-form-item>
          </div>
          
          <!-- 公司相关字段，仅在用户类型为法人时显示 -->
          <div v-if="formData.type === 2">
            <el-form-item prop="company_name" label="会社名">
              <div class="input-with-tip">
                <el-input v-model="formData.company_name" class="company-input" style="width: 400px;height: 32px;">
                </el-input>
                <div class="form-tip">法人の場合のみ必須 64文字以内 (あと64文字入力可)</div>
              </div>
            </el-form-item>
            <div class="company-group">
              <el-form-item prop="company_number" class="half-width" label="法人番号">
                <el-input v-model="formData.company_number" style="width: 400px;height: 32px;"></el-input>
              </el-form-item>
              <el-form-item prop="company_phone" class="half-width" label="電話番号">
                <el-input v-model="formData.company_phone" style="width: 400px;height: 32px;"></el-input>
              </el-form-item>
            </div>
          </div>
          
          <el-form-item prop="address" label="住所（番地まで）" required>
            <el-input v-model="formData.address" type="text" :rows="1" class="address-input" style="width: 200px;height: 32px;"></el-input>
          </el-form-item>
          
          <el-form-item prop="zip_code" label="郵便番号" required>
            <el-input v-model="formData.zip_code" class="zip-input" style="width: 200px;height: 32px;"></el-input>
          </el-form-item>
          
          <el-form-item prop="prefectures" label="都道府県" required>
            <el-input v-model="formData.prefectures" class="prefecture-input" style="width: 200px;height: 32px;"></el-input>
          </el-form-item>

          <el-form-item prop="agreeTerms" style="margin-bottom: 15px;">
            <div class="checkbox-container">
              <el-checkbox v-model="formData.agreeTerms"><a href="/article/3" class="terms-link">利用規約</a>および<a href="/article/2" class="terms-link">個人情報の取り扱い</a>について同意します。</el-checkbox>
            </div>
          </el-form-item>
          
          <el-form-item>
            <div class="button-container">
              <el-button type="primary" class="register-button" style="width: 175.5px;height: 32px;background-color: #35B2EA;border: none;" @click="handleSubmit">
                <span style="font-size: 14px;">入力内容を確認する</span>
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { Message, Lock, Key, User, OfficeBuilding } from '@element-plus/icons-vue'
import { userApi } from '../api/index'

// 初始化路由
const router = useRouter()
const route = useRoute()

// 表单引用
const registerFormRef = ref(null)

// 邮箱
const email = ref('')

// 提示框关闭状态
const isTipClosed = ref(false)

// 关闭提示框
const closeTip = () => {
  isTipClosed.value = true
}

// 表单数据
const formData = reactive({
  verificationCode: '',
  username: '',
  email: '',
  password: '',
  repassword: '',
  type: 1,
  surname: '',
  name: '',
  surname2: '',
  name2: '',
  address: '',
  zip_code: '',
  prefectures: '',
  company_name: '',
  company_number: '',
  company_phone: '',
  agreeTerms: false
})

// 页面加载时获取邮箱信息
onMounted(() => {
  // 从路由参数或查询参数中获取邮箱
  const emailFromRoute = route.query.email || route.params.email || ''
  email.value = emailFromRoute
  formData.email = emailFromRoute
})

// 监听用户类型变化，重置公司相关字段
watch(() => formData.type, (newType) => {
  if (newType === 1) {
    formData.company_name = ''
    formData.company_number = ''
    formData.company_phone = ''
  }
})

// 注册表单验证规则
const registerRules = {
  verificationCode: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  surname: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  surname2: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  zip_code: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  prefectures: [
    { required: true, message: '必須', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '必須', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.password) {
          callback(new Error('パスワードが一致しません'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 处理提交
const handleSubmit = () => {
  registerFormRef.value.validate((valid) => {
    if (valid) {
      // 构建注册数据
      const registrationData = {
        code: formData.verificationCode,  //验证码
        username: formData.username,  //用户名
        password: formData.password,   //密码
        repassword: formData.repassword,  //确认密码
        email: email.value,    //邮箱
        type: formData.type,   //用户类型
        surname: formData.surname,    //姓
        name: formData.name,    //名字
        surname2: formData.surname2,  //假名
        name2: formData.name2,   //假名
        address: formData.address,   //地址
        zip_code: formData.zip_code,  //邮政编码
        prefectures: formData.prefectures,    //都道府県 
        company_name: formData.company_name,  //会社名
        company_number: formData.company_number,  //会社番号
        company_phone: formData.company_phone  //会社電話
      }
      // 调用后端API进行注册
      userApi.register(registrationData).then(res => {
        console.log(res)
        if(res.code == -1){
          ElMessage.error(res.msg)
        }else if(res.code == 1){
          ElMessage.success('登録が順調に完了しました')
          // 注册成功后跳转到登录页
          router.push('/login')
        }
      }).catch(error => {
        ElMessage.error(error.message || '注册失败，请稍后重试')
      })
    }
  })
}

// 处理更改邮箱 - 返回到邮箱输入步骤
const handleChangeEmail = () => {
  router.push('/register')
}
</script>

<style scoped>
.el-form-item{
  margin-top: 15px;
  margin-left: 45px;
}
.tip-txt{
  font-size: 14px;
    line-height: 24px;
    color: rgb(0, 108, 0);
    margin: auto;
}
.tip{
  width: 100%;
  height: 54px;
  background-color: #ECF8EB;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tip-close {
  position: absolute;
  right: 15px;
  background: none;
  border: none;
  font-size: 18px;
  color: rgb(0, 108, 0);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-close:hover {
  color: rgb(0, 80, 0);
}
.logo-box {
  width: 100%;
  background-color: white;
  border-bottom: 1px solid rgb(181, 179, 179);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  min-height: 56px;
}
.register-form-page {
  max-height: 100%;
  min-width: 100%;
  background-color: #e7f1fa;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

.register-content .register-left {
  transition: all 0.3s ease;
}

.register-content .register-left:only-child,
.register-content .register-left:nth-last-child(1):first-child {
  flex: 1 1 100%;
  max-width: 100%;
}

.register-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #e7f1fa;
  max-height: 100%;
}

.logo {
    width: 105px;
    aspect-ratio: auto 105 / 35;
    height: 35px;
    position: relative;
    right: 475px;
}

.logo-container {
  position: relative;
  justify-content: center;
  margin-bottom: 15px;
  max-height: 20%;
}

.logo-container a {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-container a:hover {
  transform: scale(1.05);
}

.register-title {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.register-subtitle {
  color: #006ab6;
  font: 700 16px / 1 "Hiragino Kaku Gothic Pro", sans-serif;
  margin: 0 0 20px 0;
  text-align: center;
}

.register-box {
  width: 1020px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* 表单项通用样式 */
:deep(.el-form-item) {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
}

:deep(.el-form-item__label) {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 4px;
  width: 180px !important;
  text-align: left;
  flex-shrink: 0;
}

:deep(.el-form-item__content) {
  flex: 1;
  margin-left: 0 !important;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 6px 8px;
  min-height: 28px;
}

:deep(.el-input__inner) {
  font-size: 12px;
  color: #333;
}

:deep(.el-radio) {
  margin-right: 15px;
}

:deep(.el-radio__label) {
  font-size: 12px;
  color: #333;
}

:deep(.el-button) {
  font-size: 12px;
  padding: 8px 16px;
}

/* 响应式设计 */
/* 平板设备适配 */
@media (max-width: 1024px) and (min-width: 769px) {
  
  .register-box {
    width: 90%;
    max-width: 800px;
    padding: 25px 20px;
  }
  
  .logo {
    position: static;
    right: auto;
    margin: 0 auto;
    display: block;
  }
  
  .logo-box {
    text-align: center;
  }
  
  :deep(.el-form-item__label) {
    width: 200px !important;
  }
}

/* 移动设备适配 */
@media (max-width: 768px) {

  .register-form-page {
    padding: 10px;
  }
  
  .register-box {
    width: 100%;
    max-width: 100%;
    padding: 20px 15px;
    margin: 0;
  }
  
  .logo {
    position: static;
    right: auto;
    margin: 0 auto;
    display: block;
  }
  
  .logo-box {
    text-align: center;
  }
  
  :deep(.el-form-item) {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 15px;
  }
  
  :deep(.el-form-item__label) {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left;
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  
  .el-form-item {
    margin-left: 0;
  }
  
  .name-group {
    flex-direction: column;
    gap: 10px;
  }
  
  .name-group .half-width {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  .company-group {
    gap: 10px;
  }
  
  .user-type-radio {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-desc, .form-tip {
    font-size: 12px;
    margin-top: 5px;
  }
  
  .register-button {
    width: 100% !important;
    height: 40px !important;
  }
  
  .button-container {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .register-box {
    padding: 15px 10px;
  }
  
  .tip-txt {
    font-size: 12px;
    padding: 0 10px;
  }
  
  :deep(.el-form-item__label) {
    display: flex !important;
    justify-content: flex-start !important;
    font-size: 13px;
    text-align: left !important;
  }
  
  :deep(.el-input__inner) {
    font-size: 14px;
  }
  
  .form-desc, .form-tip {
    font-size: 11px;
  }
  
  .register-button span {
    font-size: 13px !important;
  }
  
  /* 移动端输入框宽度调整 */
  .password-confirm-input,
  .name-input,
  .company-input,
  .address-input,
  .zip-input,
  .prefecture-input {
    width: 100% !important;
  }
  
  /* 移动端表单项间距调整 */
  .half-width {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  /* 移动端复选框容器 */
  .checkbox-container {
    width: 100%;
    text-align: left;
    margin-left: 0 !important;
  }
  
  :deep(.el-checkbox) {
    justify-content: flex-start;
    display: inline-block;
    text-align: left;
  }
  
  /* 移动端提示文字 */
  .input-with-tip .form-tip {
    margin-top: 5px;
    font-size: 11px;
  }
}

/* 邮箱显示区域 */
.email-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 15px;
}

.email-display .el-icon {
  color: #909399;
  font-size: 14px;
}

.email-display span {
  flex: 1;
  color: #333;
}

.change-email-btn {
  font-size: 12px;
  padding: 0;
  color: #409eff;
}

/* 验证码输入框 */
:deep(.verification-input .el-input__wrapper) {
  width: 100%;
}

/* 用户名输入框 */
:deep(.username-input .el-input__wrapper) {
  width: 100%;
}

/* 密码输入框 */
:deep(.password-input .el-input__wrapper),
:deep(.password-confirm-input .el-input__wrapper) {
  width: 100%;
}

/* 用户类型选择 */
.user-type-radio {
  display: flex;
  gap: 20px;
  margin-left: 0;
}

/* 姓名组布局 */
.name-group {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.name-group .half-width {
  flex: 1;
  margin-bottom: 0;
}

.name-group :deep(.el-form-item__label) {
  width: auto !important;
  min-width: 80px;
}

.name-group .half-width:first-child :deep(.el-form-item__label) {
  width: 180px !important;
}

.name-group .half-width:last-child :deep(.el-form-item__label) {
  width: 120px !important;
}

:deep(.name-input .el-input__wrapper) {
  width: 100%;
}

/* 地址相关输入框 */
:deep(.address-input .el-input__wrapper) {
  width: 100%;
}

:deep(.zip-input .el-input__wrapper) {
  width: 250px;
}

:deep(.prefecture-input .el-input__wrapper) {
  width: 250px;
}

/* 公司名称输入框样式 */
:deep(.company-input .el-input__wrapper) {
  width: 150%;
}

.company-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.company-group .half-width {
  flex: 1;
}

.company-group :deep(.el-form-item__label) {
  width: 180px !important;
  min-width: 80px;
}

.company-group :deep(.el-form-item__content) {
  margin-left: 0 !important;
}

.company-group :deep(.el-input__wrapper) {
  width: 200px !important;
}

.checkbox-container {
  font-size: 14px;
  margin-left: 180px;
}

.button-container {
  margin-left: 180px;
}

/* 移动端按钮居中 */
@media (max-width: 768px) {
  .button-container {
    margin-left: 0;
    text-align: center;
  }
}

.register-button {
  height: 45px;
  font-size: 16px;
  border-radius: 6px;
}

.register-options {
  text-align: center;
  margin-top: 20px;
}

.login-link {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
}

.login-link:hover {
  text-decoration: underline;
}

.terms-link {
  color: #409eff;
}

.terms-link:hover {
  text-decoration: underline;
}

.input-with-tip {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-tip {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.form-desc {
  display: block;
  margin-top: 3px;
  color: #666;
  font-size: 12.6px;
}

.password-confirm-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  margin-top: 15px;
}
</style>